@use '../../styles/variables' as *;
.leo-auto-complete {
    position: relative; 
    .leo-suggestion-list {
        list-style:none;
        padding-left: 0;
        white-space: nowrap;
        position: absolute;
        background: $white;
        z-index: 100;
        top: calc(100% + 8px);
        left: 0;
        border: $menu-border-width solid $menu-border-color;
        box-shadow: $submenu-box-shadow;
        width: 100%;
        .suggstions-loading-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 75px;
          }
        .suggestion-item {
            padding: $menu-item-padding-y $menu-item-padding-x;
            cursor: pointer;
            transition: $menu-transition;
            color: $body-color;
            &.is-active {
                background: $menu-item-active-color !important;
                color: $white !important;
            }
            &:hover {
                color: $menu-item-active-color !important;
              }
        }
    }
}